import { useState, useRef } from 'react';
import avatar from '../images/avatar.jpeg'; // 导入图片

export const Form = ({ handleAddComment }) => {
  // 维护表单组件状态
  const [txt, setTxt] = useState('xxx');

  // 创建 ref
  const txtRef = useRef(null);

  // 评论输入变化
  const handleTxtChange = (e) => {
    console.log(e.target.value);
    setTxt(e.target.value);
  };

  const addComment = (e) => {
    // 输入框的处理
    // 发表评论之前，进行数据判断
    if (!txt.trim()) {
      //   this.txtRef.current.focus();
      return alert('请输入评论内容');
    }

    // 添加评论，要把评论内容传递到父组件
    handleAddComment(txt);

    // 发表评论完毕后，1、设置输入框焦点 2、清空评论区
    // this.setState({
    //   txt: '',
    // });
    setTxt('');
    txtRef.current.focus();
  };

  return (
    <div className="comment-send-container">
      <div>
        <img className="user-head" src={avatar} alt="头像" />
      </div>
      <div className="comment-send">
        <div className="textarea-container">
          <textarea
            cols="80"
            rows="5"
            placeholder="发条友善的评论"
            ref={txtRef}
            value={txt} // 控制值的显示
            onChange={handleTxtChange} // 控制值的变化
            className="ipt-txt"
          />
          <button className="comment-submit" onClick={addComment}>
            发表评论
          </button>
        </div>
        <div className="comment-emoji">
          <i className="face"></i>
          <span className="text">表情</span>
        </div>
      </div>
    </div>
  );
};
